<style lang="scss">
@import "./style.scss";
</style>

<template>
  <div>
    <z-space vertical>

      <h3>水平排列row</h3>
      <p>默认为垂直排列，row表示水平排列。</p>


<div class="demo">
  <zw-layout row>
    <zw-layout class="box">1</zw-layout>
    <zw-layout class="box box-o">2</zw-layout>
  </zw-layout>
</div>

      <vue-code-mirror :tpl="def.d1"></vue-code-mirror>

      <h3>填充expand</h3>
      <p>根据剩余空间填充（主轴方向）。</p>

<div class="demo">
  <zw-layout row>
    <zw-layout class="box" expand>1</zw-layout>
    <zw-layout class="box box-o">2</zw-layout>
  </zw-layout>
</div>

<vue-code-mirror :tpl="def.d2"></vue-code-mirror>

<p>如果有多个，则会等分剩余空间。</p>

<div class="demo">
  <zw-layout row>
    <zw-layout class="box">1</zw-layout>
    <zw-layout class="box box-o" expand>2</zw-layout>
    <zw-layout class="box" expand>3</zw-layout>
  </zw-layout>
</div>

      <vue-code-mirror :tpl="def.d3"></vue-code-mirror>

    </z-space>
  </div>
</template>

<script>

import VueCodeMirror from "@example/components/VueCodeMirror";
export default {
  components: {VueCodeMirror},
  data() {
    return {
      def: {
        d1:
`
<zw-layout row>
    <zw-layout class="box">1</zw-layout>
    <zw-layout class="box box-o">2</zw-layout>
</zw-layout>
`,
        d2:
`
<zw-layout row>
  <zw-layout class="box" expand>1</zw-layout>
  <zw-layout class="box box-o">2</zw-layout>
</zw-layout>
`,
d3:
`
<zw-layout row>
  <zw-layout class="box">1</zw-layout>
  <zw-layout class="box box-o" expand>2</zw-layout>
  <zw-layout class="box" expand>3</zw-layout>
</zw-layout>
`
      }
    }
  },
  setup() {
    return {
    }
  }
}
</script>
